<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-model 双向绑定 用户需要填写，点击选择这些操作使用双向绑定，在表单元素中，一般使用双向绑定
     v-bind 属性绑定（单向绑定）-->


     <div id="app">
         <input type="text" v-model='msg'>{{msg}}
         <hr>


         <input type="radio" v-model='sex' value="1">男
         <input type="radio" v-model='sex' value="2">女 {{sex}}
         <hr>

         <!-- 复选框 单个情况 单个复选框 ，绑定到布尔值 -->
         <input type="checkbox" v-model='check1'> {{check1}}

         <hr>

         <!-- 多个复选框绑定到数组 -->
         <input type="checkbox" v-model='hobby' value='1'>萝莉
         <input type="checkbox" v-model='hobby' value='2'>少妇
         <input type="checkbox" v-model='hobby' value='3'>学生妹 {{hobby}}
        <hr>
         <!-- 下拉列表 选中单个绑定到option项具体的值   下拉列表选中多个绑定数组，option项具体的值会存到数组中 multiple多选属性 -->
         <select v-model = 'xi'>
             <option value="1">日韩</option>
             <option value="2">欧美</option>
             <option value="3">国产</option>
             <option value="4">动漫</option>
         </select>
         {{xi}}
         <hr>
         <textarea ></textarea>
     </div>
</body>
<script src="./V/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'我是最帅的',
            sex:'1',
            check1:false,
            hobby:['1'],
            xi:2
        },
    })
</script>
</html>